<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-20 19:27:43
 * @Description  : 计划任务添加或者修改面板
-->

<template>
  <div class="bg-lightColor scheduleTask-edit-con p-3 text-[13px]">
    <n-grid x-gap="12" :cols="1" class="mb-2">
      <n-gi>
        <n-button
          type="primary"
          size="small"
          class="!text-[13px]"
          @click="backView"
        >
          <div class="mr-2 rotate-90 transform">
            <SvgIcon icon="xiala" color="#fff" size="10px"></SvgIcon>
          </div>
          返回
        </n-button>
      </n-gi>
    </n-grid>
    <n-divider class="!my-2" />
    <n-form
      ref="scheduleTaskFormRef"
      :label-width="isSmall ? 100 : 120"
      label-placement="left"
      :label-align="isSmall ? 'left' : 'right'"
      :model="scheduleTask"
      size="small"
      require-mark-placement="right"
      :rules="formRule"
    >
      <n-form-item label="任务名称：" path="name">
        <n-input
          v-model:value="scheduleTask.name"
          :allow-input="noSideSpace"
          placeholder="请输入任务名称"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        />
      </n-form-item>
      <!-- <n-form-item label="任务类型：" path="type">
        <n-radio-group
          v-model:value="scheduleTask.type"
          name="radiobuttongroup2"
        >
          <n-radio-button :value="0" label="请求URL" />
          <n-radio-button :value="1" label="内置方法" />
        </n-radio-group>
      </n-form-item> -->

      <!-- <MyTransition>
        <div v-if="scheduleTask.type === 0"> -->
      <n-form-item label="方法名称：" path="url">
        <!-- <n-input
          v-model:value="scheduleTask.url"
          placeholder="请输入方法名称："
          :allow-input="noSideSpace"
          clearable
          class="!w-[300px]"
          :maxlength="50"
        /> -->
        <n-select
          v-model:value="scheduleTask.url"
          :options="scheduleList"
          class="!w-[300px]"
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">后端的内置方法</div>
      </n-form-item>
      <!-- </div>
      </MyTransition> -->

      <!-- <MyTransition>
        <div v-if="scheduleTask.type === 1">
          <n-form-item label="URL地址：" path="url">
            <n-input
              v-model:value="scheduleTask.url"
              placeholder="请输入URL地址："
              :allow-input="noSideSpace"
              clearable
              class="!w-[300px]"
              :maxlength="50"
            />
            <div class="ml-[12px] text-gray-400 text-[12px]">
              后端请求的url接口地址，请谨慎填写
            </div>
          </n-form-item>
        </div>
      </MyTransition> -->

      <n-form-item label="执行周期：" path="time">
        <n-input
          v-model:value="scheduleTask.time"
          placeholder="请输入执行周期："
          :allow-input="noSideSpace"
          clearable
          class="!w-[300px]"
          :maxlength="20"
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          为CRON表达式，请谨慎填写
        </div>
      </n-form-item>
      <n-form-item label="任务描述：" path="desc">
        <n-input
          v-model:value="scheduleTask.desc"
          placeholder="请输入任务描述："
          type="textarea"
          :allow-input="noSideSpace"
          clearable
          class="!w-[300px]"
          :maxlength="255"
        />
      </n-form-item>
      <n-form-item label="是否启用：" path="isActive">
        <n-switch
          v-model:value="scheduleTask.isActive"
          :checked-value="1"
          :unchecked-value="0"
        />
      </n-form-item>
      <n-form-item label=" " v-permission="[PERMISSIONS.SCHEDULE_EDIT]">
        <n-button
          type="primary"
          class="grent-btn w-[120px]"
          @click="handleSave"
        >
          保存
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type {
  ScheduleTaskRes,
  ScheduleTaskUpdateReq
} from '@/types/scheduleTask'
import { PERMISSIONS } from '@/constants/permission'
import { noSideSpace } from '@/utils'
import { userMenuShow } from '@/hooks/useMenuShow'
const { isSmall } = userMenuShow()

const props = defineProps<{
  isModify: boolean
  scheduleRes?: ScheduleTaskRes
}>()

const emits = defineEmits<{
  (e: 'backView'): void
  (e: 'changeSchedule', type: number, data: ScheduleTaskUpdateReq): void
}>()
const backView = () => {
  emits('backView')
}

const scheduleTask = reactive<ScheduleTaskUpdateReq>({
  name: '',
  url: '',
  time: '',
  desc: '',
  isActive: 1
})

const scheduleList = ref([
  {
    label: '文件清理',
    value: 'system.cleanFile'
  },
  {
    label: '日志导出',
    value: 'system.exportLog'
  },
  {
    label: '安全配置更换',
    value: 'system.secrtyUpdate'
  }
])

const initSchedule = () => {
  if (props.isModify) {
    const { name, url, time, isActive, id, desc } =
      props.scheduleRes as ScheduleTaskRes
    scheduleTask.scheduleTaskId = id
    scheduleTask.name = name
    scheduleTask.url = url
    scheduleTask.time = time
    scheduleTask.isActive = isActive
    scheduleTask.desc = desc
  }
}

onMounted(() => {
  initSchedule()
})

const formRule = {
  name: [
    {
      required: true,
      message: '请输入计划任务名称',
      trigger: ['blur']
    },
    {
      min: 1,
      max: 50,
      trigger: ['blur'],
      message: '长度在1-50位'
    }
  ],
  url: [
    {
      required: true,
      message: '请选择计划任务',
      trigger: ['blur']
    }
  ],
  time: [
    {
      required: true,
      message: '请输入计划任务执行周期',
      trigger: ['blur']
    }
  ]
}

const scheduleTaskFormRef = ref<FormInst | null>(null)

const handleSave = () => {
  scheduleTaskFormRef.value?.validate((error: any) => {
    if (error) {
      return
    }

    if (props.isModify) {
      emits('changeSchedule', 1, scheduleTask)
    } else {
      emits('changeSchedule', 0, scheduleTask)
    }
  })
}
</script>

<style scoped lang="scss"></style>
